<!--  -->
<template>
  <div class="app">
    <div class="flex mb-30">
      <div class="btn-back" @click="routerGoTo('MemberDetail')">
        <i class="el-icon-back"></i> 返回
      </div>
      <div class="line"></div>
      <div class="name">学员备注</div>
    </div>
    <div>
      <el-form ref="ruleForm" label-width="200px" class="demo-ruleForm">
        <el-form-item prop="num">
          <span slot="label"> 备注</span>   
          <quill-editor
          v-model="content"
          @change="onEditChange($event)"
          ></quill-editor>
        </el-form-item>
      </el-form>
    </div>

    <div class="footer">
      <el-button type="primary" @click="comfire">确认</el-button>
      <el-button @click="routerGoTo('MemberDetail')">取消</el-button>
    </div>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
// import Quill from "quill";
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'
export default {
  //import引入的组件需要注入到对象中才能使用
  components: {
    quillEditor
  },
  data() {
    //这里存放数据
    return {
        content:""
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    routerGoTo(val) {
      this.$router.push({
        name: val,
        params:{
          id:this.$route.params.id
        }
      });
    },
    onEditChange(event){
        console.log(event);
    },
   async comfire(){
        console.log(this.content);
         await this.$request.put(`/member/${this.$route.params.id}/remark`,{
            remark:this.content
         }).then((res) => {
        console.log(res);
        if(res.status == 0){
            this.$message('成功')
            this.routerGoTo('MemberDetail')
        }
      });
    }
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {

  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    // this.onEditorFocus()
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style scoped lang="less">
.app {
  padding: 30px;
  background-color: white;
  .btn-back {
    &:hover {
      color: #3ca7fa;
      cursor: pointer;
    }
  }
  .mb-30 {
    margin-bottom: 30px;
  }
  .line {
    width: 1px;
    height: 14px;
    background-color: #d8d8d8;
    margin-right: 15px;
    margin-left: 15px;
  }
  .flex {
    width: 100%;
    display: flex;
  }
  .flex-spaceCenter {
    justify-content: center;
  }
  .flex-spaceBetween {
    justify-content: space-between;
  }

  .footer {
    position: fixed;
    bottom: 0;
    padding: 20px;
  }
}
</style>
